<template>
	<view class="teacher">
		<view class="app-card">
			<view class="title">课堂情况</view>
			<view >学生总人数</view>
			<inpNum :title="'学生迟到人数'" />
			<inpNum :title="'学生旷课人数'" />
			<inpNum :title="'学生请假人数'" />
		</view>
		<view class="app-card">
			<view class="title">学生听课状态</view>
			<mycheckbox id="1" @change="change" :group="pro" />
			<textarea auto-height=true placeholder="请输入问题描述" v-if="isqita" />
		</view>
		<view class="app-card">
			<view class="title">老师上课状态</view>
			<mycheckbox id="2" @change="change2" :group="pro2" />
			<textarea auto-height=true placeholder="请输入问题描述" v-if="isqita2" />
		</view>
	</view>
</template>

<script>
	const pro2 = [
		{
			title: '睡觉',
			state: false
		},
		{
			title: '交头接耳',
			state: false
		},
		{
			title: '吃零食',
			state: false
		},
		{
			title: '打游戏',
			state: false
		},
		{
			title: '不带课本',
			state: false
		},
		{
			title: '玩手机',
			state: false
		},
		{
			title: '不穿工作服',
			state: false
		},
		{
			title: '其他',
			state: false
		}
	]
	const pro = [
		{
			title: '睡觉',
			state: false
		},
		{
			title: '交头接耳',
			state: false
		},
		{
			title: '吃零食',
			state: false
		},
		{
			title: '打游戏',
			state: false
		},
		{
			title: '不带课本',
			state: false
		},
		{
			title: '玩手机',
			state: false
		},
		{
			title: '不穿工作服',
			state: false
		},
		{
			title: '其他',
			state: false
		}
	]
	import mycheckbox from '../../../components/checkbox.vue'
	import inpNum from '../../../components/inputNumber.vue'
	export default {
		data(){
			return {
				pro,
				isqita: false,
				isqita2: false,
				pro2
			}
		},
		methods:{
			change(id,index){
				if(id != 1) return
				this.pro[index].state = !this.pro[index].state;
				if(index == this.pro.length - 1){
					this.isqita = !this.isqita
				}
			},
			change2(id,index){
				if(id != 2) return;
				this.pro2[index].state = !this.pro2[index].state;
				if(index == this.pro2.length - 1){
					this.isqita2 = !this.isqita2
				}
			}
		},
		components:{
			mycheckbox,
			inpNum
		}
	}
</script>

<style lang="scss" scoped>
	.teacher{
		width: 100%;
		.title{
			font-size: 14px;
			margin-bottom: 10px;
		}
	}
</style>
